<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 轮播图 </title>
    <style>
        .container {
            margin: 30px auto;
            width: 600px;
            height: 400px;
            position: relative;
            overflow: hidden;
            border: 1px solid gray;
            box-shadow: 3px 3px 5px gray;
            border-radius: 6px;
        }

        .container .list {
            width: 4200px;
            height: 400px;
            position: absolute;
            margin: 0 auto;
            text-align: center;
        }

        .container .list img {
            float: left;
            width: 600px;
            height: 400px;
        }

        .dots {
            cursor: pointer;
            list-style-type: none;
            position: absolute;
            left: 40%;
            bottom: 15px;

        }
        .dots .active{
            background-color: orange;
        }

        .dots li {
            float: left;
            width: 20px;
            height: 20px;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            background-color: #333333;
            margin-left: 9px
        }
        
        #btn1,
        #btn2 {
            width: 28px;
            height: 45px;
            position: absolute;
            top: 40%;
            text-align: center;
            font-size: 28px;
            font-weight: bolder;
            color: #000;
            outline: none;
            border: none;
            background: rgba(128, 128, 128, 0.5);
        }
        #btn1 {
                left: 30px;
            }

        #btn2 {
                right: 30px;
            }
    </style>
</head>

<body>
    <div class="container">
        <div class="tu">
            <img src="./adver01.jpg" alt="" id="pic">
            <img src="./adver02.jpg" alt="">
            <img src="./adver03.jpg" alt="">
            <img src="./adver04.jpg" alt="">
            <img src="./adver05.jpg" alt="">
            <img src="./adver06.jpg" alt="">

        </div>
        <ul class="dots">
            <li id="1" class="active" >1</li>
            <li id="2">2</li>
            <li id="3">3</li>
            <li id="4">4</li>
            <li id="5">5</li>
            <li id="6">6</li>
        </ul>
        <div id="arr">
            <button  id="btn1"><</button>
            <button  id="btn2">></button>
        </div>
        
    </div>

</body>
<script src="../lib/jquery.min.js"></script>
<script >
    $(function(){
        //鼠标移动进入退出时左右按钮的显示
        $('.container').mouseover(() =>{
            clearInterval(timer);
            $('#btn1 ').show();
            $('#btn2').show();
        });
        $('.container').mouseout(() =>{
            fun();
            $('#btn1 ').hide();
            $(' #btn2').hide();
        });
        let imgarr=['./adver01.jpg','./adver02.jpg','./adver03.jpg','./adver04.jpg','./adver05.jpg','./adver06.jpg',];
         let n = 0;
         let pic=document.getElementById('pic');
        let index=1;
        let timer;
        //自动播放
         function fun (){
            clearInterval(timer);
            timer= setInterval(function(){ 
                index++;
                if(index==7){
                index=1
                }
             $('li').removeClass('active');       
            $('li:nth-child('+(index)+')').addClass('active');
            pic.src='./adver0'+index+'.jpg';    
        },1000);
    
        };
        window.onload = fun();


        //点击按钮时播放
         function ck(n){
            $('img').attr('src',imgarr[n]);
            $('li').removeClass('active');
            $('li:nth-child('+(n+1)+')').addClass('active');
        }
        
        $('#btn1').click( () =>{
           n --;
           if(n <0){
              alert("这已经是第一张了");     
           }
           ck(n);
        });
        $('#btn2').click( () =>{
           n ++;
           if(n >5){
               alert("这已经是最后一张了");
           }
           ck(n);
        });
        //点击下面的小点
 
        $('#1').click(e =>{
            $('img').attr('src',"./adver01.jpg");
            $('li').removeClass('active');
            $('#1').addClass('active');
        });
        $('#2').click(e =>{
            $('img').attr('src',"./adver02.jpg");
            $('li').removeClass('active');
            $('#2').addClass('active'); 
        });
        $('#3').click(e =>{
            $('img').attr('src',"./adver03.jpg");
            $('li').removeClass('active');
            $('#3').addClass('active');
        });
        $('#4').click(e =>{
            $('img').attr('src',"./adver04.jpg");
            $('li').removeClass('active');
            $('#4').addClass('active');
        });
        $('#5').click(e =>{
            $('img').attr('src',"./adver05.jpg");
            $('li').removeClass('active');
            $('#5').addClass('active');
        });
        $('#6').click(e =>{
            $('img').attr('src',"./adver06.jpg");
            $('li').removeClass('active');
            $('#6').addClass('active');
        });

    });
 
</script>

</html>